<template>
	<view class="container">
		<tab :tabArr="tabArr" @onClick="onTabClick" class="tab" :currentTabIndex="currentTabIndex"></tab>
		<loading v-if="loading" class="loading"></loading>
		<content v-show="currentTabIndex == 0" :reserveData="reserveData" @shipClick="onShipClick" @detailClick="onDetailClick"></content>
		<content v-show="currentTabIndex == 1" :reserveData="unshippedData" @shipClick="onShipClick"></content>
		<content v-show="currentTabIndex == 2" :reserveData="shippingData" @shipClick="onShipClick" @detailClick="onDetailClick"></content>
		<content v-show="currentTabIndex == 3" :reserveData="doneData" @shipClick="onShipClick"></content>
		<uni-popup ref="reserveLogin" :is-mask-click="false">
			<view class="login-box">
				<view class="login-button" @click="login">快捷登录</view>
				<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">快捷登录</button> -->
				<!-- <button class="login-button" type="default" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button> -->
			</view>
		</uni-popup>
		<uni-popup ref="celebrityDialog" type="center">
			<littleu-modal content="请等待管理员审核达人身份,再点击登录" @confirm="celebrityDialogConfirm" @cancel="celebrityDialogCancel">
			</littleu-modal>
		</uni-popup>
	</view>
</template>

<script>
	import {
		Reserve
	} from '@/models/reserve.js'
	import { Customer} from '@/models/customer.js'
	const reserveModel = new Reserve()
	const customerModel = new Customer()
	import tab from './components/tab.vue'
	import content from './components/content.vue'
	import loading from '@/components/littleu-loading/loading.vue'
	import littleuModal from '@/components/littleu-modal/modal.vue'
	export default {
		data() {
			return {
				currentTabIndex: 0,
				reserveData: [],
				unshippedData: [],
				shippingData: [],
				doneData: [],
				tabArr: [{
					status: 0,
					title: "全部"
				}, {
					status: 1,
					title: "待发货"
				}, {
					status: 2,
					title: "发货中"
				}, {
					status: 3,
					title: "已完成"
				}],
				pageArr: [1, 1, 1, 1],
				count: 10,
				loadingArr: [false, false, false, false],
				loading: false,
				celebrityId: 0
			}
		},
		components: {
			tab,
			content,
			loading,
			littleuModal
		},
		methods: {
			_loadData(celebrityId) {
				let submitData = {
					status: this.tabArr[this.currentTabIndex].status,
					celebrity_id: celebrityId,
					page: this.pageArr[this.currentTabIndex],
					count: this.count
				}
				this.loading = true
				reserveModel.getReserveByPage(submitData, (res) => {
					if (res.items.length > 0) {
						this.reserveData = res.items
						this.pageArr[this.currentTabIndex] += 1
						this.loading = false
					} else {
						this.loading = false
						this.loadingArr[this.currentTabIndex] = true
					}
					uni.stopPullDownRefresh()
				})
			},
			onTabClick(e) {
				this.currentTabIndex = e.index
				if (e.index == 0) {
					if (this.reserveData.length == 0) {
						this._getReserveByIndex(e.index, this.celebrityId)
					}
				} else if (e.index == 1) {
					if (this.unshippedData.length == 0) {
						this._getReserveByIndex(e.index, this.celebrityId)
					}
				} else if (e.index == 2) {
					if (this.shippingData.length == 0) {
						this._getReserveByIndex(e.index, this.celebrityId)
					}
				} else if (e.index == 3) {
					if (this.doneData.length == 0) {
						this._getReserveByIndex(e.index, this.celebrityId)
					}
				}
			},
			onShipClick(e) {
				uni.navigateTo({
					url: '/pages/reserve/reserve?id=' + e.id
				})
			},
			onDetailClick(e) {
				uni.navigateTo({
					url: '/pages/reserve/delivery-list?id=' + e.id
				})
			},
			getPhoneNumber() {
				console.log(2222222)
			},
			login() {
				let that = this
				uni.getUserProfile({
					success(res) {
						const summitData = {
							avatar: res.userInfo.avatarUrl,
							nickname: res.userInfo.nickName
						}
						customerModel.updateCustomer(summitData, (result) => {
							if(result.celebrity_id){
								uni.setStorageSync('celebrity_id', result.celebrity_id)
								that.$refs.reserveLogin.close()
								that._loadData(result.celebrity_id)
								that.celebrityId = result.celebrity_id
							}else{
								that.$refs.celebrityDialog.open()
							}
							
						})
					},
					fail(res) {
						console.log("getUserProfile 调用失败", res);
					},
				})
			},
			celebrityDialogConfirm(){
				this.$refs.celebrityDialog.close()
			},
			celebrityDialogCancel(){
				this.$refs.celebrityDialog.close()
			},
			_getReserveByIndex(index, celebrityId) {
				let status = this.tabArr[index].status
				let page = this.pageArr[index]
				let submitData = {
					status,
					celebrity_id: celebrityId,
					page,
					count: this.count
				}
				this.loading = true
				let that = this
				reserveModel.getReserveByPage(submitData, (res) => {
					let tmpData = res.items
					if (tmpData.length > 0) {
						if (index == 0) {
							that.reserveData = that.reserveData.concat(tmpData)
						} else if (index == 1) {
							that.unshippedData = that.unshippedData.concat(tmpData)
						} else if (index == 2) {
							that.shippingData = that.shippingData.concat(tmpData)
						} else if (index == 3) {
							that.doneData = that.doneData.concat(tmpData)
						}
						that.pageArr[index] += 1
						that.loading = false
					} else {
						that.loading = false
						that.loadingArr[index] = true
					}
				})
			}
		},
		onReachBottom() {
			if (!this.loadingArr[this.currentTabIndex]) {
				this._getReserveByIndex(this.currentTabIndex, this.celebrityId)
			}
		},
		onReady() {
			if(uni.getStorageSync('celebrity_id') == ''){
				this.$refs.reserveLogin.open()
			}else{
				this.celebrityId = uni.getStorageSync('celebrity_id')
				this._loadData(uni.getStorageSync('celebrity_id'))
			}
		},
		onPullDownRefresh(){
			this.currentTabIndex = 0
			this.pageArr = [1, 1, 1, 1]
			this.loadingArr = [false, false, false, false],
			this._loadData(this.celebrityId)
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F8F5;
	}

	.loading {
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 999;
	}

	.login-box {
		width: 710rpx;
		height: 400rpx;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		font-size: 26rpx;
	}

	.login-button {
		width: 280rpx;
		height: 80rpx;
		border-radius: 20rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		background-color: $uni-color-primary;
	}
</style>